import React from 'react';
import { 
    View,
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'
export default class HomeCard extends React.Component {
    constructor(props){
		super(props);
	}
    _onPress= (url) =>{
        this.props.navigate(url)
    }
    render() {
        const data = this.props.data;
        return (
            <TouchableOpacity onPress={()=>this._onPress(data.url)}>
                <View style={styles.cardMain}>
                    <View style={[styles.flexColum,styles.top]}>
                        <View style={styles.flexColum}>
                            <Icon name={data.icon} style={styles.icon}></Icon>
                            <Text style={styles.topTxt}>{data.title}</Text>
                        </View> 
                        <View>
                            <Text style={styles.topTxt}>{data.hatch ? '去孵化' : '去邀请'} ></Text>
                        </View> 
                    </View>
                    <View style={[styles.flexColum,styles.btmTxt]}>
                        <View style={styles.btmItem}>
                            <Text style={[styles.txtTag,styles.tc,styles.topTxt]}>{data.yesterday_income}</Text>
                            <Text style={styles.txtTag}>昨日收益</Text>
                        </View>
                        <View style={styles.btmItem}>
                            <Text style={styles.txtTag}>{data.accumulated}</Text>
                            <Text style={styles.txtTag}>累计收益</Text>
                        </View>
                        <View style={styles.btmItem}>
                            <Text style={styles.txtTag}>{data.depositsum}</Text>
                            <Text style={styles.txtTag}>{data.hatch ? '孵化总数' : '邀请总数'}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    cardMain:{
        width: '100%',
        paddingTop: 10,
        paddingBottom: 10,
        borderTopWidth:1,
        borderTopColor:'#cccccc',
        borderBottomWidth:1,
        borderBottomColor:'#cccccc',
        borderLeftWidth:1,
        borderLeftColor:'#cccccc',
        borderRightWidth:1,
        borderRightColor:'#cccccc',
        marginTop: 10
    },
    top:{
        paddingLeft: 10,
        paddingRight: 10
    },  
    flexColum:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
    },
    icon:{
        fontSize: 15,
        color:'#101010',
        marginRight: 5
    },
    btmTxt:{
        marginTop: 15, 
    },
    txtTag:{
        fontSize: 14,
        color:'#101010',
        textAlign:'center',
        marginTop: 5
    },
    topTxt:{
        fontSize: 14,
        color:'#FF7F00'
    },
    btmItem:{
        width: '33.33%',
        textAlign:'center'
    },
    tc:{
        textAlign:'center'
    }
})